<template>
	<view class="px-2">
		<block v-for="(item, index) in list" :key="index">
			<view class="flex align-center py-1 border-bottom border-light-secondary">
				<label v-if="gear===1" class="flex align-center justify-center flex-shrink"
				  style="width: 100rpx;height: 100rpx;"
				  @click="selectItem(index)">
					<radio :value="item.imei" color="#FD6801" :checked="item.checked" />
				</label>
				<view class="flex-1 flex flex-column">
					<view>
						<text class="font font-weight-bold">{{item.deviceName}}</text>
						<image v-if="!item.online" class="ml-3" src="../../static/imgs/info.jpg" style="width: 25rpx;height: 25rpx;"></image>
						<image v-else class="ml-3" src="../../static/imgs/on_line.png" style="width: 25rpx;height: 25rpx;"></image>
					</view>
					<view class="text-light-muted font-sm">
						<uni-row>
							<uni-col :span="8">
								<text>压力：{{item.adc}}</text>
							</uni-col>
							<uni-col :span="8">
								<text>档位：{{item.gear}}</text>
							</uni-col>
							<uni-col :span="8">
								<text>降雨量：0</text>
							</uni-col>
						</uni-row>
						<uni-row>
							<uni-col :span="8">
								<text>X 轴：</text>
								<text>{{item.x}}</text>
							</uni-col>
							<uni-col :span="8">
								<text>Y 轴：{{item.y}}</text>
							</uni-col>
						</uni-row>
						<uni-row>
							<uni-col :span="8">
								<text>经度：{{Math.floor(item.lng * 100) / 100}}</text>
							</uni-col>
							<uni-col :span="8">
								<text>纬度：{{Math.floor(item.lat * 100) / 100}}</text>
							</uni-col>
						</uni-row>
					</view>
				</view>
			</view>
		</block>
		<!-- 操作 -->
		<view v-if="gear===1" class="flex align-center position-fixed left-0 right-0 bottom-0 border-top border-light-secondary" 
		  style="height: 100rpx;z-index: 101;">
			<!-- 全选 -->
			<label class="flex align-center justify-center flex-shrink" style="width: 120rpx;height: 100%;"
			  @click="doSelectAll">
				<radio color="#FD6801" :checked="checkedAll" />
			</label>
			<view class="flex-1 flex align-center justify-between">
				<block v-if="selectedList.length > 0">
					<image src="../../static/imgs/p1.jpg" style="width: 100rpx;height: 100rpx;" @click="gearOne"></image>
					<image src="../../static/imgs/p2.jpg" style="width: 100rpx;height: 100rpx;" @click="gearTwo"></image>
					<image src="../../static/imgs/p3.jpg" style="width: 100rpx;height: 100rpx;" @click="gearThree"></image>
					<image src="../../static/imgs/reset.jpg" style="width: 100rpx;height: 100rpx;" @click="close"></image>
				</block>
				<block v-else>
					<image src="../../static/imgs/p1.jpg" style="width: 100rpx;height: 100rpx;opacity: 0.4;"></image>
					<image src="../../static/imgs/p2.jpg" style="width: 100rpx;height: 100rpx;opacity: 0.4;"></image>
					<image src="../../static/imgs/p3.jpg" style="width: 100rpx;height: 100rpx;opacity: 0.4;"></image>
					<image src="../../static/imgs/reset.jpg" style="width: 100rpx;height: 100rpx;opacity: 0.4;"></image>
				</block>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			gear: {
				type: [Number, String],
				default: 0
			}
		},
		data() {
			return {
				list: [],
				// 选中设备
				selectedList: [],
				query: {
					pageNum: 1,
					pageSize: 20,
					isOnline: '',	// 0 离线  1 在线
				},
			}
		},
		computed: {
			// 全选
			checkedAll() {
				if (this.list.length === 0) return false;
				return this.list.length === this.selectedList.length
			}
		},
		mounted() {
			this.getList();
		},
		methods: {
			getList() {
				this.$H.get('/water/device_info/list', this.query, {token: true}).then(res => {
					console.log(res)
					this.list = []
					let datas = res.rows;
					datas.forEach(item => {
						this.list.push({
							deviceId: item.deviceId,
							gear: item.gear,
							deviceName: item.deviceName,
							imei: item.imei,
							adc: item.adc ? item.adc : 0,
							lat: item.lat ? item.lat : 0,
							lng: item.lng ? item.lng : 0,
							x: item.x ? item.x : 0,
							y: item.y ? item.y : 0,
							online: item.isOnline,
							checked: false
						})
					})
				});
			},
			// 单选
			selectItem(index) {
				let imei = this.list[index].imei
				let i = this.selectedList.indexOf(imei);
				// 已选中
				if (i > -1) {
					// 取消选中
					this.list[index].checked = false;
					// 移除选中
					return this.selectedList.splice(i, 1);
				}
				// 选中
				this.list[index].checked = true;
				this.selectedList.push(imei);
			},
			// 	全选
			selectAll() {
				this.selectedList = this.list.map(v => {
					v.checked = true;
					
					return v.imei
				})
			},
			// 取消全选
			unSelectAll() {
				this.list.forEach(v => {
					v.checked = false;
				})
				this.selectedList = []
			},
			doSelectAll() {
				if (this.checkedAll) {
					this.unSelectAll();
				} else {
					this.selectAll();
				}
			},
			// 一档
			gearOne() {
				// let imei = this.selectedList.join(',');
				this.selectedList.forEach(item => {
					this.$H.post('/water/device_info/motor_state',
						{ imei: item, command: 1},
						{ token: true },
					).then(res => {
						console.log(res)
					})
				})
			},
			// 二档
			gearTwo() {
				// let imei = this.selectedList.join(',');
				this.selectedList.forEach(item => {
					this.$H.post('/water/device_info/motor_state',
						{ imei: item, command: 2}, 
						{ token: true },
					).then(res => {
						console.log(res)
					})
				})
			},
			// 三档
			gearThree() {
				// let imei = this.selectedList.join(',');
				this.selectedList.forEach(item => {
					this.$H.post('/water/device_info/motor_state',
						{ imei: item, command: 3}, 
						{ token: true },
					).then(res => {
						console.log(res)
					})
				})
			},
			// 复位
			close() {
				// let imei = this.selectedList.join(',');
				this.selectedList.forEach(item => {
					this.$H.post('/water/device_info/motor_state',
						{ imei: item, command: 0}, 
						{ token: true },
					).then(res => {
						console.log(res)
					})
				})
			},
			// 档位对应的角度
			gearFilter(val) {
				if (val === 0) return 0;
				else if (val === 1) return 15
				else if (val === 2) return 20
				else if (val === 3) return 25
			}
		}, // end methods
	}
</script>
